<template>
  <window-header show-set-top />

  <main-layout :is-empty="false">
    <!-- 搜索框   -->
    <template #searchBtn>
      <search-box />
    </template>

    <!--  左侧列表  -->
    <template #mainLeftList>
      <category-list @select-menu="handleSelectMenu" />
    </template>

    <!--   右侧标题 -->
    <template #rightTitle>
      <title-panel :title="currentMenuName" />
    </template>

    <!--   右侧主内容：收藏列表  -->
    <template #mainRightContent>
      <content-list :category="currentMenuKey" />
    </template>
  </main-layout>
</template>

<script setup>

import MainLayout from "@/components/MainLayout.vue";
import SearchBox from "./search/index.vue";
import CategoryList from './category/index.vue';
import ContentList from './contentList/index.vue'

import { ref } from "vue";

// 动态标题，默认为全部收藏
const currentMenuName = ref('全部收藏')
const currentMenuKey = ref('all')

// 设置当前选中的菜单项
const handleSelectMenu = (item) => {
  console.log('当前选中的菜单项接收', item)
  currentMenuName.value = item.label
  currentMenuKey.value = item.key
}

</script>

<style scoped>

</style>
